/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useRef, memo} from 'react';
import {FlatList, RefreshControl} from 'react-native';
import {View} from 'react-native-ui-lib';
import {useScrollToTop} from '@react-navigation/native';
import AuditItem from '../AuditItem';
import {useNavigation} from '@react-navigation/native';

const List = ({
  refreshAsync,
  loading,
  data,
  listRef,
  checkedList,
  setCheckedList,
  done,
}) => {
  const flatListRef = listRef ?? useRef();
  useScrollToTop(flatListRef);
  const [refreshing, setRefreshing] = useState(false);
  const navigation = useNavigation();

  const onRefresh = async () => {
    // 下拉刷新
    setRefreshing(true);
    await refreshAsync();
    setRefreshing(false);
  };

  return (
    <View flex-1>
      <FlatList
        ref={flatListRef}
        style={{paddingBottom: 66}}
        data={data}
        renderItem={({item}) =>
          AuditItem({item, navigation, checkedList, setCheckedList, done})
        }
        keyExtractor={item => item.id.toString()}
        refreshControl={
          <RefreshControl
            refreshing={refreshing || loading}
            onRefresh={onRefresh}
          />
        }
      />
    </View>
  );
};

export default memo(List);
